<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${ctx}/css/common.css" />
<link rel="stylesheet" href="${ctx}/css/login.css" />

<script type="text/javascript" src="${ctx}/js/jquery.js"></script>

<script type="text/javascript">
var winWidth = $(window).width();

$(document).ready(function() {
	var bottomCenterWidth = $(window).width() - $(".bottom_left").width() - $(".bottom_right").width();
	$(".bottom_center").width(bottomCenterWidth);
	$(".bottom_center").css("display","block");
	console.log($(window).width() + "====" + $(".bottom").width());
	
	$(window).resize(function(){
		var w = $(this).width();
		bottomCenterWidth = w - $(".bottom_left").width() - $(".bottom_right").width();
		$(".bottom_center").width(bottomCenterWidth);
	});
	
	$("#accountName").focus();
});

//更新验证码
function changeVerify(){ 
	$("#verifyImg").attr("src","${ctx}/validateCodeServlet?t="+Math.random());
}

//表单提交
function formSubmit(){
	if(validation()){
		$("#loginForm").submit();
	}
}

//表单验证
function validation(){
	if($("#accountName").val() == ""){
		$(".err_msg").html("<s:text name="LoginNameNullMsg" />");
		$("#accountName").focus();
		return false;
	}
	
	if($("#password").val() == ""){
		$(".err_msg").html("<s:text name="PasswordNullMsg" />");
		$("#password").focus();
		return false;
	}

	if($("#verifyCode").val() == ""){
		$(".err_msg").html("<s:text name="VerifyCodeNullMsg" />");
		$("#verifyCode").focus();
		return false;
	}
	
	return true;
}

//重设表单
function resetForm(){
	$("#accountName").val("");
	$("#password").val("");
	$("#verifyCode").val("");
}

//回车登录
function keyEnter(e){ 
	var ev = window.event || e;
    if(ev.keyCode == 13){ 
    	formSubmit();
    }   
}

document.onkeypress = keyEnter;

</script>
</head>

<body sroll="no">
	<div class="background">
    	<div class="top">
        	<img src="${ctx}/images/login/bg_round.png" width="290px" height="184px" />
        </div>
        <div class="center">
        	<div class="center_line1">
            	<div class="center_line2_clear"></div>
                <div class="center_line1_left"></div>
                <div class="center_line1_right"></div>
            </div>
        	
            <div class="center_line2">
            	<div class="center_line2_clear"></div>
            	<div class="center_line2_computer">
                	<img src="${ctx}/images/login/computer.png" width="194" height="209" />
                </div>
                <div class="center_line2_name"></div>
                <div class="center_line2_right">
                	<div class="login_top"></div>
                	<div class="err_msg">${errMsg}</div>
                	<form id="loginForm" name="loginForm" action="login.action" method="post">
                		<input type="hidden" id="appid" name="appid" value="1"/>
	                    <div class="login_user">
	                        <span style="margin-left:30px;"><s:text name="AccountName" /></span>
	                        <input id="accountName" name="accountName" type="text" class="inputClass" size="20" value="" />
	                    </div>
	                    <div class="login_pass">
	                        <span style="margin-left:30px;"><s:text name="Password" /></span>
	                        <input id="password" name="password" type="password" class="inputClass" size="20" value="" />
	                    </div>
	                    <div class="verify_code">
	                        <span style="margin-left:30px;"><s:text name="VerifyCode" /></span>
	                        <input id="verifyCode" name="verifyCode" type="text" class="inputClass" size="5" value="" />
	                        <img id="verifyImg" name="verifyImg" alt="<s:text name="UpdateVerifyCode" />" src="${ctx}/validateCodeServlet" onclick="changeVerify()">
	                    </div>
	                    <div class="login_bottom">
	                    	<input id="login" name="login" type="button" class="btnClass" value="<s:text name="Login" />"  onclick="formSubmit();"/>
	                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	                        <input id="reset" name="reset" type="reset" class="btnClass" value="<s:text name="Reset" />"  onclick="resetForm();"/>
	                    </div>
                    </form>
                </div>
            </div>
            
            <div class="center_line3">
            	<div class="center_line2_clear"></div>
            	<div class="center_line3_left"></div>
                <div class="center_line3_right"></div>
            </div>
        </div>
        <div class="bottom">
        	<div class="bottom_left"></div>
            <div class="bottom_center" style="display: none;">
                <p>
	                <s:text name="CopyRight" /><br>
	                <s:text name="CopyRight_ZH" />
                </p>
            </div>
            <div class="bottom_right"></div>
        </div>
    </div>
</body>
</html>
